<template>
  <div id="projects">
    <div v-for="pro in show_projects" :key="pro.id">
      <img :src="pro.img_url" alt="加载错误" class="pro_img" />
      <p class="pro_title">{{pro.title}}</p>
      <div class="user_box">
        <el-avatar :size="40" :src="pro.user_img_url"></el-avatar>
        <span>{{pro.nickname}}</span>
      </div>
      <p>
        <el-tooltip effect="dark" v-if="mine" content="进入编辑" placement="bottom-end">
          <el-button type="primary" icon="el-icon-edit"></el-button>
        </el-tooltip>
        <el-tooltip effect="dark" content="查看演示" placement="bottom-end">
          <el-button type="warning" icon="el-icon-video-camera-solid"></el-button>
        </el-tooltip>
        更新时间：{{pro.date}}
      </p>
    </div>
  </div>
</template>

<script>
import { get_dataview, get_all_dataview } from "../api/projects";
export default {
  name: "projects",
  data() {
    return {
      user_info: {},
      projects: [],
      all_projects: []
    };
  },
  computed: {
    mine() {
      return this.$store.state.project.mine;
    },
    show_projects() {
      let key = this.$store.state.project.search_val;
      if (this.$store.state.project.mine)
        return this.projects.filter(e => {
          if (e.title.includes(key)) return true;
        });
      else
        return this.all_projects.filter(e => {
          if (e.title.includes(key)) return true;
        });
    }
  },
  created() {
    this.user_info = this.$store.state.account.user_info;
    // console.log(this.user_info)
    get_dataview(this.user_info.id).then(res => {
      this.projects = res.data.dataList;
    });

    get_all_dataview(this.user_info.id).then(res => {
      this.all_projects = res.data.dataList;
      // console.log(this.all_projects)
    });
  }
};
</script>

<style lang="less">
#projects {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 20px;
  > div {
    width: 280px;
    height: 280px;
    // background-color: rgb(172, 196, 67);
    padding: 10px 10px 0px;
    margin: 35px 38px 0px;
    cursor: pointer;
    // border: 1px solid rgb(134, 134, 134) ;
    border-radius: 6px;
    transition: all 0.3s;
    box-shadow: 6px 6px 10px rgb(134, 134, 134),
      -6px 6px 10px rgb(134, 134, 134);
    &:hover {
      transform: translateY(-10px);
      // box-shadow: 6px 6px 10px rgb(134, 134, 134),
      //   -6px 6px 10px rgb(134, 134, 134);
    }
    > .pro_img {
      width: 100%;
      height: 110px;
      // background-color: rgb(190, 73, 26);
    }
    > .pro_title {
      font-family: "楷体";
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      padding: 10px 20px;
      font-size: 20px;
      // background-color: blue;
    }
    > .user_box {
      display: flex;
      align-items: center;
      padding: 8px 20px;
      > span {
        margin-right: 20px;
      }
    }
    p:last-child {
      margin-top: 6px;
      font-size: 12px;
      color: rgb(160, 160, 160);
      text-align: right;
      > .el-button {
        margin-left: 20px;
        float: left;
        padding: 4px 10px;
      }
    }
  }
}
</style>